<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>数据源管理</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <script src="/style/public/publicStyle.js"></script>
</head>
<body>
<div class="weadmin-body">
    <div class="layui-row">
        <table class="layui-hide" id="mainTable" lay-filter="mainTableFilter"></table>
    </div>
</div>
<!--表格操作-->
<script type="text/html" id="op">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="delete">处理</a>
</script>

</body>
<script>
    layui.use(['table','layer'],function (){
        var util = layui.util
            , laypage = layui.laypage //分页
            , layer = layui.layer //弹层
            , table = layui.table //表格、
            , form = layui.form;
        table.render({
            elem: '#mainTable'
            , even: true //开启隔行背景
            , cellMinWidth: 80
            , toolbar: ''
            , url: '/med/baseMsg/findByPage'
            , cols: [[
                , {field: 'idMsg', title: 'ID', hide: true}
                , {field: 'cd', title: '消息编码',width:100}
                , {field: 'na', title: '消息内容'}
                , {field: 'euTp', title: '消息类型'}
                , {field: 'dtSysCre', title: '发生时间',width:170, templet: '<div>{{layui.util.toDateString(d.dtSysCre, \'yyyy-MM-dd HH:mm:ss\')}}</div>'}
                , {field: 'fgHand', title: '处理标志'}
                , {field: 'naEmpHand', title: '处理人'}
                , {field: 'dtHand', title: '处理时间',width:170, templet: '<div>{{layui.util.toDateString(d.dtHand, \'yyyy-MM-dd HH:mm:ss\')}}</div>'}
                , {fixed: 'right', title: '操作',width:100, align: 'center', toolbar: '#op'}
            ]]
            , limit:15
            , done: {}
            , page: true
        });
        var editType;
        table.on('toolbar()', function (obj) {
            var data = obj.data;
            switch (obj.event) {
                case 'add':
                    editType = "add";
                    $("#mainForm")[0].reset();
                    form.render();
                    layer.open({
                        //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                        type: 1,
                        title: "新增指标",
                        area: ['720px', '600px'],
                        content: $("#tableForm")//引用的弹出层的页面层的方式加载修改界面表单
                    });
                    break;
            }
        });
        table.on('tool()', function (obj) {
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent == 'edit') {
                editType = "edit";
                form.val("tableForm", data);
                layer.open({
                    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                    type: 1,
                    title: "编辑指标",
                    area: ['720px', '600px'],
                    content: $("#tableForm")//引用的弹出层的页面层的方式加载修改界面表单
                });
            } else if (layEvent == 'delete') {
                layer.confirm('确定删除' + data.na + '指标吗？', {
                    btn: ['继续', '取消'], //按钮
                }, function () {
                    layer.closeAll('dialog');
                    $.ajax({
                        type: "get",
                        url: "/med/mdIndex/delete",
                        async: true,
                        data: {'idIndex': data.idIndex},
                        success: function (json) {
                            table.reload("mainTable",{where:{filter: $("#tableFilter").val()}});
                        }
                    });
                });
            }
        });
        form.on('submit(mainSave)', function (massage) {
            debugger;
            if(editType == "add") {
                $.ajax({
                    url: '/med/mdIndex/insert',
                    type: 'post',
                    dataType: 'json',
                    contentType: 'application/json;charset=UTF-8',
                    data: JSON.stringify(massage.field),
                    success: function (msg) {
                        table.reload("mainTable",{where:{filter: $("#tableFilter").val()}});
                    }
                })
            } else if(editType == "edit") {
                $.ajax({
                    url: '/med/mdIndex/update',
                    type: 'post',
                    dataType: 'json',
                    contentType: 'application/json;charset=UTF-8',
                    data: JSON.stringify(massage.field),
                    success: function (msg) {
                        table.reload("mainTable",{where:{filter: $("#tableFilter").val()}});
                    }
                })
            }
        });
        function merge(res) {
            var data = res.data;
            var columsName = ['idIndexRoot','euValtp','unit'];//需要合并的列名称
            var columsIndex = [0,1,2];//需要合并的列索引值
            var mergeIndex = 0;//定位需要添加合并属性的行数
            var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数
            for(var k=0;k<columsName.length;k++) {
                var trArr = $(".layui-table-body>.layui-table").find("tr");//所有行
                for(var i=1;i<data.length;i++) {
                    if(data[i]["idIndexRoot"]==data[i-1]["idIndexRoot"]) {
                        var tdCurArr = trArr.eq(i).find("td").eq(columsIndex[k]);//获取当前行的当前列
                        var tdPreArr = trArr.eq(mergeIndex).find("td").eq(columsIndex[k]);//获取相同列的第一列
                        mark += 1;
                        tdPreArr.each(function () {//相同列的第一列增加rowspan属性
                            $(this).attr("rowspan", mark);
                        });
                        tdCurArr.each(function () {//当前行隐藏
                            $(this).css("display", "none");
                        });
                    } else {
                        mergeIndex = i;
                        mark = 1;//一旦前后两行的值不一样了，那么需要合并的格子数mark就需要重新计算
                    }
                }
                mergeIndex = 0;
                mark = 1;
            }
        }
    });
</script>